<template>
    <!-- 搜索表单 -->
    <div class="search-div">
        <el-form label-width="70px" size="small">
        <el-row>
            <el-col :span="12">
            <el-form-item label="品牌">
                <el-select
                class="m-2"
                placeholder="选择品牌"
                size="small"
                style="width: 100%"
                v-model="queryDto.brandId"
                >
                <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
                </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="分类">
                <el-cascader
                :props="categoryProps"
                style="width: 100%"
                v-model="searchCategoryIdList"
                />
            </el-form-item>
            </el-col>
        </el-row>
        <el-row style="display:flex">
            <el-button type="primary" size="small" @click="searchCategoryByQuery">
            搜索
            </el-button>
            <el-button size="small" @click="resetData">重置</el-button>
        </el-row>
        </el-form>
    </div>

    <!-- 添加按钮 -->

    <div class="tools-div">
         <el-button type="success" size="small" @click="addShow">添 加</el-button>
    </div>
    <!-- 添加或者修改对话框 -->
    <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
    <el-form label-width="120px">
        <el-form-item label="品牌">
            <el-select
                       class="m-2"
                       placeholder="选择品牌"
                       size="small"
                       v-model="categoryBrand.brandId"
                       >
                <el-option
                           v-for="item in brandList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"
                           />
            </el-select>
        </el-form-item>
        <el-form-item label="分类">
            <el-cascader
                         :props="categoryProps"
                         v-model="categoryBrand.categoryId"
                         />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
    </el-form>
</el-dialog>

    <!-- 数据展示表格 -->
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="categoryName" label="分类" />
        <el-table-column prop="brandName" label="品牌" />
        <el-table-column prop="logo" label="品牌图标" #default="scope">
            <img :src="scope.row.logo" width="50" />
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="200" #default="scope" >
            <el-button type="primary" size="small" @click="eidtShow(scope.row)" >
                修改
            </el-button>
            <el-button type="danger" size="small" @click="remove(scope.row.id)">
                删除
            </el-button>
        </el-table-column>
    </el-table>

       <!-- 分页 -->
       <el-pagination
               v-model:current-page="pagePrams.page"
               v-model:page-size="pagePrams.limit"
               :page-sizes="[5,10, 20, 50, 100]"
               layout="total, sizes, prev, pager, next"
               :total="total"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               />
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import { GetBranList } from '@/api/brand';
import { FindCategoryByParentId } from '@/api/category';
import { GetCategoryBrandPageList,SaveCategoryBrand,UpdateCategoryBrandById,DeleteCategoryBrandById} from '@/api/categoryBrand'
import { ElMessage,ElMessageBox } from 'element-plus';


// ================数据模型定义  start ===============================================
//删除
const remove= (id)=>{

    //提示
    
    //提示框
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    })
    .then(async()=>{

     const {code}=await DeleteCategoryBrandById(id)
     //判断
     if(code===200){
        ElMessage.success("删除成功")
        fetchaData()
     }
    })


}


//修改回显
const eidtShow=row=>{
    //赋值数据
    categoryBrand.value=row
    //显示对话框
    dialogVisible.value=true


}

//修改方法实现
const updateData= async()=>{

    console.log(categoryBrand.value)
    //处理分类id categoryId =[1, 2, 3] -- categoryId[2]--categoryId=3
    //判断是否选择了分类
    if(categoryBrand.value.categoryId.length!=3){
        ElMessage.info("请选择分类选项！！")
        return 
    }
    categoryBrand.value.categoryId=categoryBrand.value.categoryId[2]
    // //判断是否选择了品牌
    // if(!categoryBrand.value.brandId){
    //     ElMessage.info("请选择品牌选项！！")
    //     return 
    // }
  
    //保存新增品牌
    const {code} =await UpdateCategoryBrandById(categoryBrand.value)
    //判断
    if(code===200){
        //提示
        ElMessage.success("修改成功")
        //关窗
        dialogVisible.value=false
        //刷新
        fetchaData()
    }else{

        ElMessage.error(message)
        }
}

//添加处理
//新增方法
const saveData= async()=>{

    console.log(categoryBrand.value)
    //处理分类id categoryId =[1, 2, 3] -- categoryId[2]--categoryId=3
    //判断是否选择了分类
    if(categoryBrand.value.categoryId.length!=3){
        ElMessage.info("请选择分类选项！！")
        return 
    }
    categoryBrand.value.categoryId=categoryBrand.value.categoryId[2]
    //判断是否选择了品牌
    if(!categoryBrand.value.brandId){
        ElMessage.info("请选择品牌选项！！")
        return 
    }
  
    //保存新增品牌
    const {code,message} =await SaveCategoryBrand(categoryBrand.value)
    //判断
    if(code===200){
        //提示
        ElMessage.success("新增成功")
        //关窗
        dialogVisible.value=false
        //刷新
        fetchaData()
    }else{

        ElMessage.error(message)
    }





}

//提交方法
const saveOrUpdate=()=>{

    //判断是否存在id
    if(!categoryBrand.value.id){
        saveData()
    }else{
        updateData()
    }




}



//定义对话框显示的变量
const dialogVisible=ref(false)
//定义新增显示对话框
const addShow=()=>{
    categoryBrand.value={}
    //设置为显示
    dialogVisible.value=true

}
//定新增表单模型
const defaultFromParam={
        id:'',
        brandId:'',
        categoryId: ''
}
const categoryBrand =ref(defaultFromParam)



//重置
const resetData=()=>{
 
    queryDto.value={}
    searchCategoryIdList.value=[]
    fetchaData()

}

//分页查询调整
const handleSizeChange=()=>{
    fetchaData()
}
const handleCurrentChange=()=>{
    fetchaData()
}

//定义搜索按钮事件
const searchCategoryByQuery=()=>{

    fetchaData()
}

//定义分页模型
const defaultPageForm={
    page:1,
    limit:10
}
const pagePrams=ref(defaultPageForm)
// 定义表格数据模型
const list = ref([])

//定义条件模型
const queryDto=ref({
    brandId:'',
    categoryId:''
})
//定义分类id接收的变量
const searchCategoryIdList=ref([])

//页面表格数据查询
const fetchaData= async()=>{

    //判断分类是否选择了
    if(searchCategoryIdList.value.length==3){

        queryDto.value.categoryId=searchCategoryIdList.value[2]
    }
    //查询
    const {data} =await GetCategoryBrandPageList(pagePrams.value.page,pagePrams.value.limit,queryDto.value)
    //赋值列表
    list.value=data.list
    //赋值总记录数
    total.value=data.total
  
}

// 定义搜索表单数据模型
const brandList = ref([])
//页面加载后获取品牌列表数据
onMounted(async()=>{
    //查询所有品牌
    findAllBrand()

    //页面加载查询
    fetchaData()

})
//查询所有品牌
const findAllBrand= async()=>{
  //请求后端获取品牌列表
  const {data}=await GetBranList()
    //赋值回显
    brandList.value=data

}

const props = {
  lazy: true,
  value: 'id',
  label: 'name',
  leaf: 'leaf',
  async lazyLoad(node, resolve) {   // 加载数据的方法
    //判断node节点中是否有id
    if(typeof node.value=='undefined') node.value=0
    //查询
    const {data} =await FindCategoryByParentId(node.value)
    //设置判断是否有下一级分类的标识
    data.forEach(item=>{
        //将是否有下一级的值赋值给leaf属性，才能在渲染后出现 “>”
        item.leaf=!item.hasChildren
    })

    resolve(data)  // 返回数据
  }
};
const categoryProps = ref(props)



// 分页条数据模型
const total = ref(0)

//======   数据模型定义end========================================================
</script>
<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>